<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }
      .bgc {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <p>pppppp</p>
    <div>div</div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //a.设置样式
    //css（"属性名"，"属性值"）  设置一个样式
    $("p").css("color", "red");
    $("p").css("color", "red").css("backgroundColor", "gray");
    //css（{	"属性名1"："属性值1"，
    //"属性名2"："属性值2"，.....
    //}）	设置多个样式
    $("p").css({
      color: "pink",
      backgroundColor: "aqua",
    });
    //b.操作类
    //Ⅰ）添加类
    //addClass（”类名“）或  addClass（”类名1 类名2 ....“）
    $("div").addClass("red");
    $("div").addClass("red").addClass("bgc");
    $("div").addClass("red bgc");
    //Ⅱ）删除类
    //removeClass（"类名"）  或  removeClass（”类名1 类名2 ....“）
    $("div").removeClass("red bgc");
    $("div").removeClass();//删除全部
  </script>
</html>
